<!-- <html>

<head>
    <script type="application/javascript">
        // function draw() {
        //     var canvas = document.getElementById("canvas");
        //     if (canvas.getContext) {
        //         var ctx = canvas.getContext("2d");

        //         ctx.fillStyle = "rgb(200,0,0)";
        //         ctx.fillRect(10, 10, 55, 50);

        //         ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        //         ctx.fillRect(30, 30, 55, 50);
        //     }
        // }

        // function draw() {
        //     var canvas = document.getElementById("canvas");
        //     if (canvas.getContext) {
        //         var ctx = canvas.getContext("2d");

        //         ctx.beginPath();
        //         ctx.moveTo(75, 50);
        //         ctx.lineTo(100, 75);
        //         ctx.lineTo(100, 25);
        //         ctx.fill();
        //     }
        // }

        // function draw() {
        //     var canvas = document.getElementById("canvas");
        //     if (canvas.getContext) {
        //         var ctx = canvas.getContext("2d");

        //         ctx.beginPath();
        //         ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // 绘制
        //         ctx.moveTo(110, 75);
        //         ctx.arc(75, 75, 35, 0, Math.PI, false); // 口 (顺时针)
        //         ctx.moveTo(65, 65);
        //         ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // 左眼
        //         ctx.moveTo(95, 65);
        //         ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // 右眼
        //         ctx.stroke();
        //     }
        // }

        // function draw() {
        //     var canvas = document.getElementById("canvas");
        //     if (canvas.getContext) {
        //         var ctx = canvas.getContext("2d");

        //         //三次贝塞尔曲线
        //         ctx.beginPath();
        //         ctx.moveTo(75, 40);
        //         ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
        //         ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
        //         ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
        //         ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
        //         ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
        //         ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
        //         ctx.fill();
        //     }
        // }



    </script>
</head>

<body onload="draw();">
    <canvas id="canvas" width="150" height="150"></canvas>
</body>

</html> -->


<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script>
        var cn;
        //= document.getElementById('cw');
        var c;
        var u = 10;
        const m = {
            x: innerWidth / 2,
            y: innerHeight / 2,
        };
        window.onmousemove = function (e) {
            m.x = e.clientX;
            m.y = e.clientY;
        };
        function gc() {
            var s = "0123456789ABCDEF";
            var c = "#";
            for (var i = 0; i < 6; i++) {
                c += s[Math.ceil(Math.random() * 15)];
            }
            return c;
        }
        var a = [];
        window.onload = function myfunction() {
            cn = document.getElementById("cw");
            c = cn.getContext("2d");

            for (var i = 0; i < 10; i++) {
                var r = 30;
                var x = Math.random() * (innerWidth - 2 * r) + r;
                var y = Math.random() * (innerHeight - 2 * r) + r;
                var t = new ob(
                    innerWidth / 2,
                    innerHeight / 2,
                    5,
                    "red",
                    Math.random() * 200 + 20,
                    2,
                );
                a.push(t);
            }
            //cn.style.backgroundColor = "#700bc8";

            c.lineWidth = "2";
            c.globalAlpha = 0.5;
            resize();
            anim();
        };
        window.onresize = function () {
            resize();
        };
        function resize() {
            cn.height = innerHeight;
            cn.width = innerWidth;
            for (var i = 0; i < 101; i++) {
                var r = 30;
                var x = Math.random() * (innerWidth - 2 * r) + r;
                var y = Math.random() * (innerHeight - 2 * r) + r;
                a[i] = new ob(
                    innerWidth / 2,
                    innerHeight / 2,
                    4,
                    gc(),
                    Math.random() * 200 + 20,
                    0.02,
                );
            }
            //  a[0] = new ob(innerWidth / 2, innerHeight / 2, 40, "red", 0.05, 0.05);
            //a[0].dr();
        }
        function ob(x, y, r, cc, o, s) {
            this.x = x;
            this.y = y;
            this.r = r;
            this.cc = cc;
            this.theta = Math.random() * Math.PI * 2;
            this.s = s;
            this.o = o;
            this.t = Math.random() * 150;

            this.o = o;
            this.dr = function () {
                const ls = {
                    x: this.x,
                    y: this.y,
                };
                this.theta += this.s;
                this.x = m.x + Math.cos(this.theta) * this.t;
                this.y = m.y + Math.sin(this.theta) * this.t;
                c.beginPath();
                c.lineWidth = this.r;
                c.strokeStyle = this.cc;
                c.moveTo(ls.x, ls.y);
                c.lineTo(this.x, this.y);
                c.stroke();
                c.closePath();
            };
        }
        function anim() {
            requestAnimationFrame(anim);
            c.fillStyle = "rgba(0,0,0,0.05)";
            c.fillRect(0, 0, cn.width, cn.height);
            a.forEach(function (e, i) {
                e.dr();
            });
        }
    </script>
    <style>
        #cw {
            position: fixed;
            z-index: -1;
        }

        body {
            margin: 0;
            padding: 0;
            background-color: rgba(0, 0, 0, 0.05);
        }
    </style>
</head>

<body>
    <canvas id="cw"></canvas>
    qwerewr
</body>

</html>